<script setup lang="ts">
import { reactive, onMounted, inject, Ref } from 'vue';
import { XueListVo, XuePageSearchDto } from '@/models/xue/XueListVo'
import { getXueList, deleteXue } from '@/api/xue/XueApi'
import { useRouter } from 'vue-router';
import { showConfirmDialog } from 'vant';

let router = useRouter();
let showNavbar: Ref<boolean> | undefined = inject("showNavbar");
let selectIds: string[] = reactive([]);

type ViewData = {
    xueList: XueListVo[],
    loading: boolean;
    finished: boolean;
    refreshing: boolean;
    pageIndex: number;
    pageSize: number;
    pageCount: number;
}
var viewData = reactive<ViewData>({
    xueList: [],
    pageIndex: 1,
    pageSize: 60,
    pageCount: 0,
    loading: false,
    finished: false,
    refreshing: false
});

onMounted(async () => {
    viewData.pageIndex = 1;
    viewData.pageSize = 60;
    getXuePagedList();
});

const getXuePagedList = async () => {
    var searchDto = new XuePageSearchDto();
    searchDto.pageIndex = viewData.pageIndex;
    searchDto.pageSize = viewData.pageSize;
    viewData.loading = true;
    let pageResult = await getXueList(searchDto);
    viewData.loading = false;
    if (pageResult) {
        //Object.assign(viewData,pageResult);
        viewData.xueList = viewData.xueList.concat(pageResult.itemList);
    }
    if (searchDto.pageIndex >= pageResult.pageCount) {
        viewData.finished = true;
    }
};

const onListLoad = async () => {
    viewData.pageIndex++;
    await getXuePagedList();
};

const xueItemTap = (item: XueListVo) => {
    return function () {
        if (showNavbar && !showNavbar.value) {
            var index = selectIds.indexOf(item.id);
            if (index >= 0) {
                selectIds.splice(index, 1);
            }
            else {
                selectIds.push(item.id);
            }

        }
        else {
            router.push({ path: '/xue/sync', query: { id: item.id } });
        }
    }
}

let timeHandler: string | number | NodeJS.Timeout | null | undefined = null;
const xueItemPress = () => {
    timeHandler = setTimeout(() => {
        if (showNavbar) showNavbar.value = false;
    }, 1000)
};
const xueItemRelease = () => {
    if (timeHandler) {
        clearTimeout(timeHandler);
        timeHandler = null;
    }
};

const delItem = (item: XueListVo) => {
    showConfirmDialog({
        title: '删除',
        message: '确认删除此靴吗？',
    }).then(async () => {
        await deleteXue(item.id);
        removeItem(item.id);
    }).catch(() => { });
};
const removeItem = (id: string) => {
    let idx = selectIds.indexOf(id);
    if (idx >= 0) {
        selectIds.splice(idx, 1);
    }
    viewData.xueList = viewData.xueList.filter(x => x.id != id);
};

const cancelSelect = () => {
    if (showNavbar) {
        showNavbar.value = true;
    }
};

const confirmSelect = () => {

};
/**
 * 解决拖动页面跟着动的问题
 */
// document.body.addEventListener('touchmove', function (e) {
//     if (e._isScroller) return;
//     e.preventDefault();
// }, {
//     passive: false
// });
</script>

<template>
    <van-nav-bar v-if="!showNavbar" left-text="取消" title="选择" @click-left="cancelSelect" @click-right="confirmSelect"
        right-text="使用" />
    <van-list @load="onListLoad" :loading="viewData.loading" :finished="viewData.finished" finished-text="没有更多了">
        <div class="flex-container">
            <template v-for="(item) in viewData.xueList" :key="item.id">
                <div class="flex-item" :class="{ active: selectIds.indexOf(item.id) >= 0 }"
                    v-touch:tap="xueItemTap(item)" v-touch:press="xueItemPress" v-touch:release="xueItemRelease">
                    <div v-if="showNavbar">
                        <van-col :span="24">{{ item.period }}</van-col>
                    </div>
                    <van-badge v-else style="width:100%">
                        <van-col :span="24">{{ item.period }}</van-col>
                        <template #content>
                            <van-icon @click="delItem(item)" name="cross" class="badge-icon" />
                        </template>
                    </van-badge>

                </div>

            </template>



        </div>
    </van-list>
</template>

<style scoped>
.flex-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-top: 5px;
}

.flex-item {
    margin: 5px;
    width: 50px;
    height: 50px;
    line-height: 50px;
    display: inline-block;
    border: 1px solid #F5F6F8;
    text-align: center;
    border-collapse: collapse;
    border-spacing: 0;
    color: gray;
}

.flex-item.active {
    border: 1px solid #E34767;
}
</style>